<template>
  <div class="center">
  

      <n-data-table
        ref="table"
        :columns="columns"
        :data="data"
        :pagination="pagination"
      >
      </n-data-table>
    <Model :showModal="showModal" :formValue="formValue" :ModelObj="Obj" :FormData="FormData" @ModelClick="ModelClick"></Model>
  </div>
</template>

<script lang="ts">
import { h, defineComponent, ref, reactive } from 'vue';
import aIcon from '../../../../assets/icons/Icon.vue';
import Search from '../../../../assets/icons/Search.vue'
import { NButton } from 'naive-ui';
import { Model } from '@/components/Model';
import { toRaw } from '@vue/reactivity'
export default defineComponent({
  components: {
    aIcon,
    Search,
    Model,
  },
  setup(props,{ emit }) {
    const showModal = ref(false);
    const size = ref('large')
    const Obj = ref({});
    const formValue = ref({})
    const pagination = ref({})
    const columns = ref([
        { title: '序号', key: 'key' },
        { title: '题型', key: 'tixing' },
        { title: '标题', key: 'biaoti' },
        {
          title: '题目内容',
          key: 'neirong',
          render(row) {
            if (!row.neirong) {
              return '-';
            }else {
              return row.neirong
            }
          },
        },
        {
          title: '行业类型',
          key: 'leixing',
          render(row) {
            return row.leixing ? row.leixing : '-'
          },
        },
        {
          title: '选项A',
          key: 'xuanxiang',
          render(row) {
            return row.xuanxiang ? row.xuanxiang : '-'
          },
        },
        {
          title: '选项B',
          key: 'xuanxiang',
          render(row) {
             return row.xuanxiang ? row.xuanxiang : '-'
          },
        },
        {
          title: '选项C',
          key: 'xuanxiang',
          render(row) {
            return row.xuanxiang ? row.xuanxiang : '-'
          },
        },
        {
          title: '选项D',
          key: 'xuanxiang',
          render(row) {
            return row.xuanxiang ? row.xuanxiang : '-'
          },
        },
        {
          title: '答案',
          key: 'daan',
          render(row) {
            return row.daan ? row.daan : '-'
          },
        },
        {
          title: '解析',
          key: 'jiexi',
          render(row) {
            return row.jiexi ? row.jiexi : '-'
          },
        },
        {
          title: '标签',
          key: 'biaoqian',
          render(row) {
            return row.biaoqian ? row.biaoqian : '-'
          },
        },
        {
          title: '行业领域',
          key: 'lingyu',
          render(row) {
            return row.lingyu ? row.lingyu : '-'
          },
        },
        {
          title: '操作',
          key: 'button',
          render(row) {
            const button = row.button.map((tagKey) => {
              return h(
                NButton,
                {
                  style: {
                    marginRight: '10px',
                  },
                  type: 'primary',
                  size: 'small',
                  tag:'a',
                  text:true,
                  onClick: () => sendMail(row,tagKey),
                },
                {
                  default: () => tagKey,
                }
              );
            });
            return button;
          },
        },
      ])
  
    //搜索
    const info = (row) => {
      console.log(formValue)
      console.log(pagination)
    };
    //表格按钮点击
    const sendMail = (row,name) => {
      console.log(name)
      formValue.value = toRaw(row)
      console.log(formValue)
      showModal.value = true
    };
    //新增按钮点击
    const add = (row) => {
      Obj.value = {title:row}
      showModal.value = true;
      formValue.value = {}
    };
    //接受子组件传递过来的事件
    const ModelClick = (row) => {
      showModal.value = row;
    };
    return {
      size,
      formValue,
      pagination,
      data: reactive([
        {
          key: 1,
          tixing: '这是题型',
          leixing: '这是类型',
          biaoqian: '这是标签',
          lingyu:'这是领域',
          biaoti: '这是标题',
          neirong: '这是内容',
          xuanxiang: '这是选项',
          daan: '这是答案',
          jiexi: '这是解析',
          button: ['查看','编辑', '删除'],
        },
        {
          key: 2,
          tixing: '这是题型',
          leixing: '这是类型',
          biaoqian: '这是标签',
          lingyu:'这是领域',
          biaoti: '这是标题',
          neirong: '这是内容',
          xuanxiang: '这是选项',
          daan: '这是答案',
          jiexi: '这是解析',
          button: ['查看','编辑', '删除'],
        },
      ]),
      formList: reactive([
        {
          label: '所属部门',
          type: 'n-select',
          enName: 'aaa',
          width: '200px',
          clearable: true,
          size: 'small',
          options: [
            { label: '徐力111', value: 1 },
            { label: '徐丽丽李111', value: 2 },
          ],
        },
        {
          label: '题型',
          type: 'n-select',
          enName: 'bbb',
          width: '200px',
          clearable: true,
          size: 'small',
          options: [
            { label: '徐力222', value: 1 },
            { label: '徐丽丽李222', value: 2 },
          ],
        },
        {
          label: '行业领域',
          type: 'n-select',
          enName: 'ccc',
          width: '200px',
          clearable: true,
          size: 'small',
          options: [
            { label: '徐力333', value: 1 },
            { label: '徐丽丽李333', value: 2 },
          ],
        },
      ]),
      
      columns,
      FormData:reactive([
        {label:'题型',type:'n-radio-group',enName:'tixing',clearable: true,size: 'small',placeholder:'请选择题型',options:[{label:'单选题',value:'单选题'},{label:'多选题',value:'多选题'},{label:'判断题',value:'判断题'},{label:'视频题目',value:'视频题目'}]},
        {label:'行业类型',type:'n-select',enName:'leixing',clearable: true,size: 'small',placeholder:'请选择行业类型',options: [{ label: '徐力111', value: '这是类型' },{ label: '徐丽丽李111', value: '徐丽丽李111' }]},
        {label:'标签',type:'n-select',enName:'biaoqian',clearable: true,size: 'small',placeholder:'请选择标签',options: [{ label: '徐力111', value: '这是标签	' },{ label: '徐丽丽李111', value: 2 }]},
        {label:'标题',type:'n-input',enName:'biaoti',clearable: true,size: 'small',placeholder:'请输入标题',},
        {label:'题目内容',type:'n-input',cenName:'neirong',learable: true,size: 'small',placeholder:'请输入题目内容',},
        {label:'选项',type:'n-input',enName:'xuanxiang',clearable: true,size: 'small',placeholder:'请输入选项',},
        {label:'答案',type:'n-input',enName:'daan',clearable: true,size: 'small',placeholder:'请输入答案',},
        {label:'解析',type:'n-input',enName:'jiexi',InputType:'textarea',clearable: true,size: 'small',placeholder:'请输入解析内容',},
      ]),
      
      info,
      add,
      sendMail,
      showModal,
      Obj,
      ModelClick,
      TabsList:[
        {name:'试题',tab:'试题'},
        {name:'视频',tab:'视频'}
      ],
    };
  },
});
</script>

<style lang="less" scoped>
.center  :deep .card {
  margin: 0 0 20px 0;
  box-shadow: 0px 3px 12px -4px rgba(51, 53, 60, 0.08);
  border-radius: 3px;
}
</style>

